<template>
  <div class="flex-none mt-10px flex items-center">
    <div class="flex-none w-180px">
      <default-input v-model:value="taskName" placeholder="请输入任务名称"/>
    </div>
    <div class="flex-none w-180px ml-10px h-40px">
      <select-input prefix="任务优先级" :options="TASK_PRIORITY" v-model:value="taskPriority"/>
    </div>
    <div class="flex-none w-180px ml-10px">
      <default-input v-model:value="taskOwner" placeholder="请输入任务处理人(可选)"/>
    </div>
    <div class="flex-none w-180px ml-10px h-40px">
      <select-input prefix="任务状态" :options="TASK_STATUS" v-model:value="taskStatus"/>
    </div>
    <div class="flex-1 ml-10px w-500px">
      <date-picker prefix="预计开始时间 - 预计结束时间" v-model="taskTime"/>
    </div>
    <div @click="onCreate"
         class="center~ h-38px ml-10px text-xs bg-blue-600 text-light-50 cursor-pointer px-10px box-border rounded flex-none">
      创建任务
    </div>
  </div>
  <alert :active="alterActive" :message="alterMessage" type="warning"/>
</template>

<script setup lang="ts">
import {useAlter} from "@/hooks";
import {TASK_PRIORITY, TASK_STATUS, useTask} from "../hooks"
import DefaultInput from "@/components/customInput/DefaultInput.vue";
import SelectInput from "@/components/customInput/SelectInput.vue";
import DatePicker from "@/components/baseComponents/DatePicker.vue";
import Alert from "@/components/baseComponents/Alert.vue";

const emits = defineEmits(["create"])
const {alterMessage, alterActive, setAlter} = useAlter("")

const {taskName, taskStatus, taskPriority, taskOwner, taskTime, getTaskItemValue, isQualified} = useTask()

function onCreate() {
  if (isQualified()) {
    setAlter("格式错误")
    return
  }

  const task = getTaskItemValue()
  emits("create", task)
}
</script>

<style scoped>

</style>